<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../resources/css/calling/pages/header.css"/>
    <link rel="stylesheet" href="../resources/css/calling/pages/jzgyy_tjfx.css"/>
    <script type="text/javascript" src="../resources/js/echarts.min.js"></script>
    <script type="text/javascript" src="../resources/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/laydate/laydate.js"></script>
    <title>业务员办理叫号</title>
</head>
<body>
<main class="container" style="padding-top: 40px;">
    <main class="w_1240">
        <ul class="quick_access_list1">
            <li class="quick_access_list1_01">
                <div><h3>342</h3>
                    <p>累计业务办理总量</p></div>
            </li>
            <li class="quick_access_list1_02">
                <div><h3>342</h3>
                    <p>当年业务办理总量</p></div>
            </li>
            <li class="quick_access_list1_03">
                <div><h3>342</h3>
                    <p>当月业务办理总量</p></div>
            </li>
            <li class="quick_access_list1_04">
                <div><h3>342</h3>
                    <p>当年咨询总量</p></div>
            </li>
            <li class="quick_access_list1_05">
                <div><h3>342</h3>
                    <p>当月咨询总量</p></div>
            </li>
            <li class="quick_access_list1_06">
                <div><h3>98%</h3>
                    <p>整体满意度</p></div>
            </li>
        </ul>
        <section class="btn_group">
            <div class="btn_group_left">
                <a href="javascript:;" class="btn_group_left_btn active">今 日</a>
                <a href="javascript:;" class="btn_group_left_btn">昨 日</a>
                <a href="javascript:;" class="btn_group_left_btn">近7日</a>
                <a href="javascript:;" class="btn_group_left_btn">本 月</a>
                <a href="javascript:;" class="btn_group_left_btn">上一月</a>
                <a href="javascript:;" class="btn_group_left_btn">本 年</a>
                <a href="javascript:;" class="btn_group_left_btn">上一年</a>
                <a href="javascript:;" class="btn_group_left_btn">历 年</a>
                <a class="btn_group_left_name">自定义</a>
                <div class="btn_group_left_date_range" id="test6">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input"
                               placeholder="选择时间">
                    </div>
                    <div class="date_z"></div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input"
                               placeholder="选择时间">
                    </div>
                    <span class="date_c"></span>
                </div>
            </div>
            <div class="btn_group_right">
                <a href="javascript:;" class="btn_group_right_btn">导出分析报告</a>
            </div>
        </section>
        <section class="echarts_group">
            <main>
                <h2>中关村大厅</h2>
                <div id="echarts_box_1"></div>
                <div id="echarts_box_2"></div>
                <div id="echarts_box_3"></div>
            </main>
            <main>
                <h2>良乡大厅</h2>
                <div id="echarts_box_4"></div>
                <div id="echarts_box_5"></div>
                <div id="echarts_box_6"></div>
            </main>
        </section>
        <section class="echarts_box_bar">
            <main id="echarts_box_7"></main>
        </section>
    </main>
</main>
</body>
</html>
<script type="text/javascript">
    laydate.render({
        elem: '#test6'
        //设置开始日期、日期日期的 input 选择器
        //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
        , range: ['#test-startDate-1', '#test-endDate-1']
    })

    var myChart = echarts.init(document.getElementById('echarts_box_1'));
    var option = {
        title: {
            text: '业务办理趋势',
            textStyle: {
                color: 'rgba(0, 0, 0, 0.85)',
                fontSize: 16,
                fontWeight: 'normal'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show: true,
            right: 0,
            top: 0,
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 2
        },
        grid: {
            top: '50px',
            left: '3%',
            right: '4%',
            bottom: '10px',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.15)',
                }
            },
            axisLabel: {
                color: 'rgba(0,0,0,0.45)'
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.06)',
                }
            },
            axisLabel: {
                color: 'rgba(0,0,0,0.45)'
            }
        },
        axisTick: {
            lineStyle: {
                color: 'rgba(0,0,0,0.15)',
            }
        },
        series: [
            {
                name: '预约取号',
                type: 'line',
                data: [120, 200, 150, 80, 70, 110, 130],
                lineStyle: {
                    color: '#678EF2'
                },
                symbol: 'circle', // 设置拐点的形状为圆圈
                showSymbol: false, // 默认不显示拐点
                emphasis: {
                    showSymbol: true // 鼠标悬停时显示拐点
                },
                markPoint: {
                    data: [
                        {
                            type: 'max',
                            name: '最大值',
                            symbolSize: 0,
                            itemStyle: {
                                borderWidth: 0,
                                color: 'transparent'
                            },
                            label: {
                                formatter: function (params) {
                                    return `峰值：${params.value}`;
                                },
                                position: 'top'
                            }
                        }
                    ]
                }
            },
            {
                name: '现场取号',
                type: 'line',
                data: [80, 120, 90, 60, 50, 70, 90],
                lineStyle: {
                    color: '#7DD5A9'
                },
                symbol: 'circle', // 设置拐点的形状为圆圈
                showSymbol: false, // 默认不显示拐点
                emphasis: {
                    showSymbol: true // 鼠标悬停时显示拐点
                },
                markPoint: {
                    data: [
                        {
                            type: 'max',
                            name: '最大值',
                            symbolSize: 0,
                            itemStyle: {
                                borderWidth: 0,
                                color: 'transparent'
                            },
                            label: {
                                formatter: function (params) {
                                    return `\n峰值：${params.value}`;
                                },
                                position: 'top'
                            }
                        }
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);


    var myChart2 = echarts.init(document.getElementById('echarts_box_2'));
    var option2 = {
        title: {
            text: '业务办理趋势',
            textStyle: {
                color: 'rgba(0, 0, 0, 0.85)',
                fontSize: 16,
                fontWeight: 'normal'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '50px',
            left: '3%',
            right: '4%',
            bottom: '10px',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['人事用印', '介绍信开具', '公证业务', '个税汇算', '因公出国(境)业务办理'],
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.15)',
                }
            },
            axisLabel: {
                color: 'rgba(0,0,0,0.45)',
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.06)',
                }
            },
            axisLabel: {
                color: 'rgba(0,0,0,0.45)'
            }
        },
        axisTick: {
            lineStyle: {
                color: 'rgba(0,0,0,0.15)',
            }
        },
        series: [
            {
                name: '预约取号',
                type: 'bar',
                data: [120, 200, 150, 80, 70],
                barWidth: '40px',
                itemStyle: {
                    color: '#678EF2'
                },
                label: {
                    show: true, // 显示标签
                    position: 'inside', // 标签位置在柱子内部
                    formatter: '{c}', // 标签内容为数值
                    color: 'rgba(255,255,255,0.85)'
                },
                symbol: 'circle', // 设置拐点的形状为圆圈
                showSymbol: false, // 默认不显示拐点
                emphasis: {
                    showSymbol: true // 鼠标悬停时显示拐点
                }
            }
        ]
    };
    myChart2.setOption(option2);


    /* var myChart3 = echarts.init(document.getElementById('echarts_box_3'));
     var option3 = {
         title: {
             text: '申办人员类型',
             textStyle: {
                 color: 'rgba(0, 0, 0, 0.85)',
                 fontSize: 16,
                 fontWeight: 'normal'
             }
         },
         tooltip: {
             trigger: 'axis'
         },
         grid: {
             top: '50px',
             left: '3%',
             right: '4%',
             bottom: '10px',
             containLabel: true
         },
         xAxis: {
             type: 'category',
             data: ['人事用印', '介绍信开具', '公证业务', '个税汇算', '因公出国(境)业务办理'],
             axisLine: {
                 lineStyle: {
                     color: 'rgba(0,0,0,0.15)',
                 }
             },
             axisLabel: {
                 color: 'rgba(0,0,0,0.45)',
                 interval: 0
             }
         },
         yAxis: {
             type: 'value',
             splitLine: {
                 lineStyle: {
                     color: 'rgba(0,0,0,0.06)',
                 }
             },
             axisLabel: {
                 color: 'rgba(0,0,0,0.45)'
             }
         },
         axisTick: {
             lineStyle: {
                 color: 'rgba(0,0,0,0.15)',
             }
         },
         series: [
             {
                 name: '预约取号',
                 type: 'bar',
                 data: [120, 200, 150, 80, 70],
                 barWidth: '40px',
                 itemStyle: {
                     color: '#678EF2'
                 },
                 label: {
                     show: true, // 显示标签
                     position: 'inside', // 标签位置在柱子内部
                     formatter: '{c}', // 标签内容为数值
                     color: 'rgba(255,255,255,0.85)'
                 },
                 symbol: 'circle', // 设置拐点的形状为圆圈
                 showSymbol: false, // 默认不显示拐点
                 emphasis: {
                     showSymbol: true // 鼠标悬停时显示拐点
                 }
             }
         ]
     };
     myChart3.setOption(option3);*/
    // 申办人员类型 - 环状图
    function initPersonnelTypeChart() {
        const chartDom = document.getElementById('echarts_box_3');
        if (!chartDom) return;

        const myChart = echarts.init(chartDom);
        // 计算总数
        const totalValue = 1430;
        const option = {
            title: {
                text: '申办人员类型',
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.85)',
                    fontSize: 16,
                    fontWeight: 'normal'
                }
            },
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: '10%',
                top: '20%',
                textStyle: {
                    color: '#000000',
                    fontSize: 11
                },
                itemWidth: 12,
                itemHeight: 8
            },
            series: [{
                name: '申办人员类型',
                type: 'pie',
                radius: ['40%', '70%'], // 内外半径，实现环形效果
                center: ['40%', '50%'],  // 将圆环中心点向右移动一点
                avoidLabelOverlap: false, // 防止标签重叠
                data: [
                    {value: 645, name: '教职工', itemStyle: {color: '#5B8FF9'}},
                    {value: 500, name: '学生', itemStyle: {color: '#72C99B'}},
                    {value: 285, name: '其他', itemStyle: {color: '#FFB743'}}
                ],
                label: {
                    show: false // 不显示标签
                },
                labelLine: {
                    show: false // 不显示指示线
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        // 添加中心文字
        option.graphic = [
            {
                type: 'group',
                left: '30vw',  // 使用center实现真正居中
                top: '20vh',
                z: 100,  // 设置层级，确保文字在环状图前面
                children: [
                    {
                        type: 'text',
                        style: {
                            text: '总数量',
                            textAlign: 'center',
                            fill: '#000000',
                            fontSize: 12
                        },
                        left: 'center',
                        top: -10
                    },
                    {
                        type: 'text',
                        style: {
                            text: '1,430',
                            textAlign: 'center',
                            fill: '#000000',
                            fontSize: 16,
                            fontWeight: 'bold'
                        },
                        left: 'center',
                        top: 10
                    }
                ]
            }
        ];

        // 恢复数值线和标签
        option.series[0].label = {
            show: true,
            formatter: function (params) {
                return params.name + ':' + params.value;
            },
            color: '#000000',
            fontSize: 12
        };

        option.series[0].labelLine = {
            show: true,
            length: 20,
            length2: 30,
            lineStyle: {
                width: 1
            }
        };
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }

    initPersonnelTypeChart();


    var myChart7 = echarts.init(document.getElementById('echarts_box_7'));
    var app = {};
    const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
    ];
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };
    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            const labelOption = {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
            };
            myChart.setOption({
                series: [
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    }
                ]
            });
        }
    };
    const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        color: '#fff',
        rich: {
            name: {}
        }
    };
    option7 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '50px',
            left: '3%',
            right: '4%',
            bottom: '10px',
            containLabel: true
        },
        legend: {
            data: ['2022年', '2023年', '2024年', '2025年'],
            left: 'left',
        },
        xAxis: [
            {
                type: 'category',
                data: ['组织部', '人力资源部', '计划财务部', '教师发展中心', '信息中心'],
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0,0,0,0.15)',
                    }
                },
                axisLabel: {
                    color: 'rgba(0,0,0,0.45)',
                    interval: 0
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0,0,0,0.15)',
                    }
                },
                axisLabel: {
                    color: 'rgba(0,0,0,0.45)',
                    interval: 0
                }
            }
        ],
        axisTick: {
            lineStyle: {
                color: 'rgba(0,0,0,0.15)',
            }
        },
        barGap: '0',
        series: [
            {
                name: '2022年',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                itemStyle: {
                    color: '#5B8FF9'
                },
                data: [320, 332, 301, 334, 390]
            },
            {
                name: '2023年',
                type: 'bar',
                label: labelOption,
                itemStyle: {
                    color: '#72C99B'
                },
                data: [220, 182, 191, 234, 290]
            },
            {
                name: '2024年',
                type: 'bar',
                label: labelOption,
                itemStyle: {
                    color: '#FFB743'
                },
                data: [150, 232, 201, 154, 190]
            },
            {
                name: '2025年',
                type: 'bar',
                label: labelOption,
                itemStyle: {
                    color: '#FF766C'
                },
                data: [98, 77, 101, 99, 40]
            }
        ]
    };
    myChart7.setOption(option7);
</script>
